.indexheader {
  padding-top: 4em;
  margin-bottom: 4em;

  .title {
    width: 100%;

    .big {
      display: flex;
      justify-content: center;

      span {
        font-size: 4em;
        color: #f8dfd4;
        line-height: 1em;
        font-family: OSLight;
      }

      span:nth-of-type(1) {
        margin-right: .5em;
      }
    }

    .small {
      display: flex;
      justify-content: center;

      span {
        font-size: 3em;
        color: #f3a23e;
        font-family: OSLight;
        line-height: 1em;
      }

      span:nth-of-type(1) {
        margin-right: .4em;
      }

      span:nth-of-type(2) {
        margin-right: .4em;
      }
    }
  }
}

.logininfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4em;

  input {
    display: inline-block;
    width: 90%;
    height: 3em;
    background: rgba(255, 255, 255, .3);
    border: 0;
    margin-bottom: 1em;
    border-bottom: 1px solid #ffffff;
    padding: 0;
    font-size: 1.3em;
    line-height: 3em;
    text-indent: 1em;
    color: #fcece5;
    font-family: OSLight;
  }

  input::-webkit-input-placeholder {
    /*Webkit browsers*/
    color: #fcece5;
  }

  input:-moz-placeholder {
    /*Mozilla Firefox 4 to 8*/
    color: #fcece5;
  }

  input::moz-placeholder {
    /*Mozilla Firefox 19+*/
    color: #fcece5;
  }

  input:-ms-input-placeholder {
    /*Internet Explorer 10+*/
    color: #fcece5;
  }

  button{
    width: 90%;
    height: 3.6em;
    background: #ffbf25;
    border: 0;
    margin-bottom: 2em;
    span:nth-of-type(1){
      color: #ffffff;
      font-size: 1.3em;
      margin-right: 1em;
    }
    span:nth-of-type(2){
      color: #ffffff;
      font-size: 1.3em;
      font-family: OSBold;
    }
  }

  a{
    color: #ffffff;
    font-size: 1.3em;
    font-family: OSLight;
  }
}

.Logwith{
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    display: inline-block;
    color: #ffffff;
    font-size: 1.3em;
    font-family: OSLight;
    position: relative;
    margin-bottom: 1.5em;
  }

  .title::before{
    content: "";
    position: absolute;
    display: inline-block;
    left: -3em;
    top: 50%;
    width: 2em;
    height: 1px;
    background: rgba(255, 255, 255, .7);
  }

  .title::after{
    content: "";
    position: absolute;
    display: inline-block;
    right: -3em;
    top: 50%;
    width: 2em;
    height: 1px;
    background: rgba(255, 255, 255, .7);
  }

  .with{
    display: flex;
    width: 90%;
    .facebook{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 3.6em;
      font-size: 1.3em;
      color: #ffffff;
      background: #3b5998;
      font-family: OSLight;
      .img{
        margin-right: 1em;
      }
    }

    .twitter{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 3.6em;
      font-size: 1.3em;
      color: #ffffff;
      background: #00acee;
      font-family: OSLight;
      .img{
        margin-right: 1em;
      }
    }
  }
}